<!--  -->
<template>
  <div class="app">
    <!-- <keep-alive :include="cachedViews">
      <router-view :key="router.fullPath" />
    </keep-alive> -->
    <!-- <div class="scale-wrapper" ref="scaleWrapper"> -->
    <!-- </div> -->
    <router-view v-slot="{ Component }">
      <keep-alive :include="cachedViews">
        <component :is="Component" :key="$route.name" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script setup>
import useStore from '@/store'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'
import { TWsClient } from '@/assets/js/wsClient'

var wsClient = new TWsClient()

const cachedViews = ref([
  'scb-home',
  'scb-welcome',
  'scb-schedule',
  'scb-event',
  'scb-medal',
  'scb-official',
  'scb-inspection',
  'scb-jump-control',
  'scb-jump-warmUp',
  'scb-jump-official',
  'scb-jump-order',
  'scb-jump-score',
  'scb-jump-score2',
  'scb-jump-45',
  'scb-jump-90',
  'scb-jump-result',
  'scb-jump-order-team',
  'scb-jump-result-team',
  'scb-dressage-control',
  'scb-dressage-official',
  'scb-dressage-order-team',
  'scb-dressage-result-team',
  'scb-dressage-order',
  'scb-dressage-score1',
  'scb-dressage-score2',
  'scb-dressage-score3',
  'scb-dressage-score4',
  'scb-dressage-score5',
  'scb-dressage-score6',
  'scb-dressage-score7',
  'scb-dressage-score8',
  'scb-dressage-score9',
  'scb-dressage-result',
  'scb-event-control',
  'scb-event-official',
  'scb-event-jump-official',
  'scb-event-order-team',
  'scb-event-order',
  'scb-event-dressage-score1',
  'scb-event-dressage-score2',
  'scb-event-dressage-score3',
  'scb-event-dressage-score4',
  'scb-event-dressage-score5',
  'scb-event-dressage-score6',
  'scb-event-result',
  'scb-event-result-team',
  'scb-cross-country-score',
  'scb-event-jump-order-team',
  'scb-event-jump-order',
  'scb-event-jump-score',
  'scb-pentathlon-control',
  'scb-pentathlon-score',
])
const { gotoUrl } = useMultiProcRequest()

const { proxy } = getCurrentInstance()
const router = useRouter()
const commonStore = useStore.useCommonStore()

const scaleWrapper = ref(null)
const designWidth = 1920
const designHeight = 1080

const ws = {
  wsUrl: '',
  initWsClient(url) {
    var me = this
    try {
      me.wsUrl = url
      if (wsClient != null) {
        wsClient.forceCloseFlag = true
        wsClient.disconnect()
        wsClient = null
      }
      wsClient = new TWsClient()
      // var wsUrl = 'ws://' + window.location.host + me.ts2025.settings.wsUrl
      // wsUrl = tsEqu.settings.wsUrl
      //wsUrl="ws://127.0.0.1:9010/wsyysvrapi"
      wsClient.init(
        me.wsUrl,
        'scbPlay',
        ['regist', 'scbPlay', 'scbAction'],
        me.onConnectedChanged,
        me.onSessionChanged,
        me.onMsg,
        { clientType: 'scbPlay' }
      )
      wsClient.connect()
      console.log(me.wsUrl)
    } catch (error) {
      console.log(error)
    }
  },
  onConnectedChanged(sender, data) {
    var me = this
    try {
      console.log('onConnectedChanged', data, wsClient.settings.wsUrl)
      if (data) {
        wsClient.sendMsg('regist', { srcId: wsClient.peerId })
      }
    } catch (error) {
      console.log(error)
    }
  },
  onSessionChanged(sender, data) {
    var me = this
    try {
      console.log('onSessionChanged', data)
    } catch (error) {
      console.log(error)
    }
  },
  onMsg(sender, msg) {
    var me = this
    try {
      console.log(JSON.stringify(msg))
      if (msg.ac == 'scbPlay') {
        console.log(msg)
        gotoUrl(msg?.tplCode, msg?.params)
        commonStore.setWsMsg(msg)
      } else if (msg.ac == 'scbAction') {
        console.log(msg)
        gotoUrl(msg?.tplCode, msg?.params)
        commonStore.setWsMsg(msg)
      }
    } catch (error) {
      console.log(error)
    }
  },
}

const resize = () => {
  const currentWidth = window.innerWidth
  const currentHeight = window.innerHeight

  // ✅【方案 1】等比缩放，居中显示（推荐：保比例，不裁剪）
  const scale = Math.min(currentWidth / designWidth, currentHeight / designHeight)
  scaleWrapper.value.style.transform = `scale(${scale}) translate(-50%, -50%)`
  scaleWrapper.value.style.left = '50%'
  scaleWrapper.value.style.top = '50%'

  // ✅【如果你希望强制铺满（会变形），改成下面的写法】
  const scaleX = currentWidth / designWidth
  const scaleY = currentHeight / designHeight
  scaleWrapper.value.style.transform = `scale(${scaleX}, ${scaleY})`
  scaleWrapper.value.style.left = '0'
  scaleWrapper.value.style.top = '0'
}

onMounted(() => {
  // 设置页面标题
  document.title = 'SCB'
  // ws.initWsClient('ws://192.168.0.248:10091/wsyysvrapi')
  ws.initWsClient('ws://10.42.0.110:10091/wsyysvrapi')
  // ws.initWsClient('ws://127.0.0.1:10091/wsyysvrapi')
  // resize()
  // window.addEventListener('resize', resize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})

// watch(
//   () => mqttStore.receivedMessages,
//   (newVal, oldVal) => {
//     if (newVal.length > 0) {
//       const latestMsg = newVal[newVal.length - 1]
//       if (latestMsg.topic === '/mq/equ/scb') {
//         latestMsg.payload?.tplCode && gotoUrl(latestMsg.payload?.tplCode, latestMsg.payload?.params)
//       }
//     }
//   },
//   { deep: true }
// )
</script>
<style lang="scss">
.scale-wrapper {
  width: 1920px;
  height: 1080px;
  position: absolute;
  transform-origin: top left;
  background-color: #000; /* 可选：方便看黑边 */
  overflow: hidden;
}
</style>
